<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>智能物业管理EBA系统 - 园区数据总览</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            background: #101a2b;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            color: #e4f1fe;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* 大屏容器 */
        .dashboard-container {
            width: 100vw;
            height: 100vh;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .dashboard-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent,
                rgba(64, 158, 255, 0.5),
                #409EFF,
                rgba(64, 158, 255, 0.5),
                transparent
            );
            box-shadow: 0 0 20px rgba(64, 158, 255, 0.5);
        }

        /* 头部样式 */
        .dashboard-header {
            width: 100vw;
            max-width: 100vw;
            height: 90px;
            background: linear-gradient(90deg, rgba(64,158,255,0.18) 0%, rgba(56,189,248,0.12) 100%);
            box-shadow: 0 4px 32px 0 rgba(64,158,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 10;
            margin-bottom: 2vh;
        }

        .dashboard-title {
            font-size: 2.8vw;
            color: #38bdf8;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-shadow: 0 0 24px #38bdf8cc, 0 2px 0 #0f1a40;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2vw;
            user-select: none;
        }

        .dashboard-title .fa {
            font-size: 2.2vw;
            margin-right: 1vw;
            color: #FFD700;
            filter: drop-shadow(0 0 8px #FFD70088);
        }

        .dashboard-time {
            position: absolute;
            right: 40px;
            font-size: 1.2vw;
            color: #94a3b8;
            background: rgba(20, 30, 60, 0.3);
            padding: 8px 20px;
            border-radius: 20px;
            border: 1px solid rgba(56, 189, 248, 0.2);
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
        }

        /* 主容器 */
        .main-dashboard-container {
            width: 1400px;
            max-width: 95vw;
            height: 80vh;
            min-height: 600px;
            background: rgba(20, 30, 60, 0.92);
            border-radius: 24px;
            box-shadow: 0 0 48px 0 rgba(0,191,255,0.15), 0 0 0 3px rgba(64,158,255,0.15) inset;
            border: 2px solid rgba(64,158,255,0.25);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 32px 24px 24px 24px;
            backdrop-filter: blur(8px);
        }

        /* 统计数据卡片容器 */
        .stats-container {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }

        .stat-card {
            flex: 1;
            background: linear-gradient(135deg, rgba(64,158,255,0.15) 0%, rgba(56,189,248,0.10) 100%);
            border: 2px solid rgba(64,158,255,0.25);
            border-radius: 20px;
            padding: 24px 20px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(64,158,255,0.1);
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.6s;
        }
        
        .stat-card:hover::before {
            left: 100%;
        }

        .stat-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(64,158,255,0.5);
            box-shadow: 0 20px 60px rgba(64,158,255,0.25), 0 0 0 1px rgba(64,158,255,0.3) inset;
            background: linear-gradient(135deg, rgba(64,158,255,0.25) 0%, rgba(56,189,248,0.18) 100%);
        }

        .stat-icon {
            font-size: 48px;
            color: #38bdf8;
            margin-bottom: 15px;
            filter: drop-shadow(0 0 12px #38bdf8cc);
            transition: all 0.3s;
        }

        .stat-card:hover .stat-icon {
            color: #FFD700;
            filter: drop-shadow(0 0 16px #FFD700cc);
            transform: scale(1.1);
        }

        .stat-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .stat-value {
            font-size: 36px;
            color: #38bdf8;
            margin-bottom: 10px;
            font-weight: bold;
            text-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
            transition: all 0.3s;
        }

        .stat-card:hover .stat-value {
            color: #FFD700;
            text-shadow: 0 0 16px #FFD70044;
        }

        .stat-label {
            font-size: 16px;
            color: #94a3b8;
            white-space: nowrap;
            transition: all 0.3s;
        }

        .stat-card:hover .stat-label {
            color: #b6c7e3;
        }

        /* 主要内容区域 */
        .main-content {
            flex: 1;
            display: flex;
            gap: 30px;
        }

        /* 左侧图表区域 */
        .charts-area {
            flex: 7;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            border: 1.5px solid rgba(64,158,255,0.10);
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 16px 0 rgba(64,158,255,0.08);
        }

        .chart-carousel {
            height: 100%;
            background: rgba(15, 23, 42, 0.5);
            border-radius: 16px;
            overflow: hidden;
            border: 1.5px solid rgba(64,158,255,0.10);
            box-shadow: 0 2px 16px 0 rgba(64,158,255,0.08);
            position: relative;
        }
        
        .chart-carousel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(56, 189, 248, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        .chart-item {
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .chart-container {
            height: 100%;
            width: 100%;
            min-height: 400px;
        }

        /* 右侧告警列表区域 */
        .alarm-area {
            flex: 3;
            background: rgba(255, 255, 255, 0.04);
            border: 1.5px solid rgba(64,158,255,0.10);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 16px 0 rgba(64,158,255,0.08);
        }
        
        .alarm-area::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 70%);
            pointer-events: none;
        }

        .alarm-title {
            font-size: 20px;
            margin-bottom: 20px;
            color: #38bdf8;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 15px;
            font-weight: 600;
            letter-spacing: 2px;
            text-shadow: 0 0 10px #38bdf844;
        }

        .alarm-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: linear-gradient(to bottom, #38bdf8, #0284c7);
            border-radius: 2px;
        }

        .alarm-count {
            margin-left: 10px;
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .alarm-list {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: calc(100% - 60px);
            min-height: 300px;
        }

        .alarm-scroll {
            position: absolute;
            width: 100%;
            transition: transform 0.5s ease;
        }

        .alarm-item {
            display: flex;
            flex-direction: column;
            padding: 15px 18px;
            border-bottom: 1px solid rgba(56, 189, 248, 0.1);
            position: relative;
            transition: all 0.3s ease;
            border: 1px solid rgba(64, 158, 255, 0.1);
            background: rgba(255, 255, 255, 0.02);
            margin-bottom: 12px;
            border-radius: 8px;
            animation: card-unfold 0.7s cubic-bezier(.4,1.6,.4,1);
        }

        @keyframes card-unfold {
            0% {
                opacity: 0;
                transform: scaleY(0.2) scaleX(0.95);
                filter: blur(8px);
            }
            40% {
                opacity: 1;
                filter: blur(2px);
                box-shadow: 0 0 32px 0 #38bdf8cc;
            }
            100% {
                opacity: 1;
                transform: scaleY(1) scaleX(1);
                filter: blur(0);
            }
        }

        .alarm-item:hover {
            transform: translateX(8px);
            background: rgba(64, 158, 255, 0.1);
            box-shadow: 0 0 20px rgba(64, 158, 255, 0.2);
        }

        .alarm-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            border-radius: 4px;
        }

        .alarm-item.level-high::before {
            background: #ef4444;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
        }

        .alarm-item.level-medium::before {
            background: #f59e0b;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
        }

        .alarm-item.level-low::before {
            background: #10b981;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
        }

        .alarm-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .alarm-time {
            font-size: 13px;
            color: #94a3b8;
        }

        .alarm-level {
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 12px;
            font-weight: 500;
        }

        .level-high {
            color: #ef4444;
            background-color: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .level-medium {
            color: #f59e0b;
            background-color: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .level-low {
            color: #10b981;
            background-color: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .alarm-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .alarm-info {
            flex: 1;
        }

        .alarm-device {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 6px;
            color: #e4f1fe;
        }

        .alarm-location {
            font-size: 13px;
            color: #94a3b8;
        }

        .alarm-type {
            font-size: 14px;
            color: #cbd5e1;
        }

        .alarm-status {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 12px;
            background-color: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            margin-left: 10px;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }

        /* 响应式调整 */
        @media screen and (max-width: 1200px) {
            .main-content {
                flex-direction: column;
            }
            
            .charts-area, .alarm-area {
                flex: auto;
            }
            
            .alarm-area {
                height: 300px;
            }
        }

        @media (max-width: 900px) {
            .dashboard-title {
                font-size: 24px;
            }
            .dashboard-title .fa {
                font-size: 20px;
            }
            .dashboard-time {
                font-size: 14px;
                right: 20px;
            }
            .stats-container {
                gap: 20px;
            }
            .stat-card {
                padding: 20px 15px;
            }
            .stat-icon {
                font-size: 36px;
            }
            .stat-value {
                font-size: 28px;
            }
            .stat-label {
                font-size: 14px;
            }
        }

        @media (max-width: 600px) {
            .dashboard-header {
                height: 60px;
            }
            .dashboard-title {
                font-size: 20px;
                padding: 0 10px;
            }
            .dashboard-title .fa {
                font-size: 16px;
            }
            .dashboard-time {
                font-size: 12px;
                right: 10px;
                padding: 6px 12px;
            }
            .main-dashboard-container {
                width: 95vw;
                height: 85vh;
                padding: 20px 15px 15px 15px;
            }
            .stats-container {
                gap: 15px;
                margin-bottom: 20px;
            }
            .stat-card {
                padding: 15px 10px;
            }
            .stat-icon {
                font-size: 28px;
                margin-bottom: 10px;
            }
            .stat-value {
                font-size: 24px;
                margin-bottom: 8px;
            }
            .stat-label {
                font-size: 12px;
            }
        }
        
        /* 动画效果 */
        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        /* 自定义Element UI样式 */
        .el-carousel__container {
            height: 100%;
        }
        
        .el-carousel__item {
            height: 100%;
        }

        @keyframes scan-line {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        @keyframes background-pan {
            from { background-position: 0 0; }
            to { background-position: 100% 100%; }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="dashboard-container">
            <!-- 头部区域 -->
            <div class="dashboard-header">
                <div class="dashboard-title">
                    <i class="fa-solid fa-chart-line"></i>
                    智能园区大屏 - 园区数据总览
                </div>
                <div class="dashboard-time">{{ currentTime }}</div>
            </div>

            <!-- 主容器 -->
            <div class="main-dashboard-container">
                <!-- 统计数据卡片 -->
                <div class="stats-container">
                    <div class="stat-card">
                        <i class="stat-icon fas fa-building"></i>
                        <div class="stat-content">
                            <div class="stat-value">{{ stats.machineRooms }}</div>
                            <div class="stat-label">园区机房总数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <i class="stat-icon fas fa-map-marker-alt"></i>
                        <div class="stat-content">
                            <div class="stat-value">{{ stats.zones }}</div>
                            <div class="stat-label">园区分区总数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <i class="stat-icon fas fa-server"></i>
                        <div class="stat-content">
                            <div class="stat-value">{{ stats.onlineDevices }}</div>
                            <div class="stat-label">在线设备统计</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <i class="stat-icon fas fa-network-wired"></i>
                        <div class="stat-content">
                            <div class="stat-value">{{ stats.onlineGateways }}</div>
                            <div class="stat-label">在线网关统计</div>
                        </div>
                    </div>
                </div>

                <!-- 主要内容区域 -->
                <div class="main-content">
                    <!-- 左侧图表区域 -->
                    <div class="charts-area">
                        <el-carousel class="chart-carousel" :interval="5000" arrow="never" indicator-position="none">
                            <el-carousel-item v-for="(chart, index) in chartData" :key="index">
                                <div class="chart-item">
                                    <div :id="'chart-' + index" class="chart-container"></div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>

                    <!-- 右侧告警列表 -->
                    <div class="alarm-area">
                        <div class="alarm-title">
                            实时告警
                            <span class="alarm-count">共 {{ alarmList.length }} 条</span>
                        </div>
                        <div class="alarm-list">
                            <div class="alarm-scroll">
                                <div v-for="(alarm, index) in alarmList" :key="index" 
                                    :class="['alarm-item', 'level-' + alarm.level]">
                                    <div class="alarm-header">
                                        <span class="alarm-time">{{ alarm.time }}</span>
                                        <span :class="['alarm-level', 'level-' + alarm.level]">{{ getLevelText(alarm.level) }}</span>
                                    </div>
                                    <div class="alarm-content">
                                        <div class="alarm-info">
                                            <div class="alarm-device">{{ alarm.device }}</div>
                                            <div class="alarm-location">{{ alarm.location }}</div>
                                        </div>
                                        <div class="alarm-type">{{ alarm.type }}</div>
                                        <div class="alarm-status">{{ alarm.status }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入必要的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    currentTime: new Date().toLocaleString(),
                    scrollTop: 0,
                    scrollInterval: null,
                    charts: [],
                    chartData: [
                        {
                            title: '系统告警分布',
                            type: 'pie',
                            data: [
                                { value: 235, name: '供配电系统' },
                                { value: 18, name: '供水系统' },
                                { value: 42, name: '电梯系统' },
                                { value: 15, name: '照明系统' }
                            ]
                        },
                        {
                            title: '分区配电房总用电情况',
                            type: 'bar',
                            xData: ['A区', 'B区', 'C区', 'D区'],
                            series: [
                                {
                                    name: '当月用电量(kW·h)',
                                    data: [12500, 8700, 15300, 10200],
                                    color: '#38bdf8'
                                }
                            ]
                        },
                        {
                            title: '分区供水泵管网压力',
                            type: 'bar',
                            xData: ['A区', 'B区', 'C区', 'D区'],
                            series: [
                                {
                                    name: '管网水压(MPa)',
                                    data: [0.6, 0.5, 0.7, 0.4],
                                    color: '#10b981'
                                }
                            ]
                        },
                        {
                            title: '照明系统',
                            type: 'line',
                            xData: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
                            series: [
                                {
                                    name: '电力消耗(kW·h)',
                                    data: [320, 280, 450, 520, 560, 480, 360]
                                },
                                {
                                    name: '打开灯控开关数量(个)',
                                    data: [10, 30, 100, 60, 85, 80, 10]
                                }
                            ],
                            smooth: true
                        }
                    ],
                    alarmList: [
                        { time: '2025-02-28 14:35:22', device: '3号楼空调主机', location: 'A区机房', type: '温度异常', level: 'high', status: '未处理' },
                        { time: '2025-02-28 14:28:15', device: '2号电梯控制系统', location: 'B区主楼', type: '通讯中断', level: 'medium', status: '处理中' },
                        { time: '2025-02-28 14:15:08', device: '消防喷淋系统', location: 'C区地下室', type: '水压异常', level: 'high', status: '未处理' },
                        { time: '2025-02-28 13:52:41', device: '照明控制器', location: 'A区走廊', type: '电流波动', level: 'low', status: '已处理' },
                        { time: '2025-02-28 13:40:12', device: '安防监控主机', location: '园区南门', type: '设备离线', level: 'medium', status: '处理中' },
                        { time: '2025-02-28 13:25:37', device: '配电室变压器', location: '配电中心', type: '过载警告', level: 'high', status: '未处理' },
                        { time: '2025-02-28 13:10:05', device: '给水泵站', location: 'D区地下室', type: '水位异常', level: 'low', status: '已处理' },
                        { time: '2025-02-28 12:48:33', device: '新风系统', location: 'B区办公室', type: 'PM2.5超标', level: 'medium', status: '处理中' },
                        { time: '2025-02-28 12:30:19', device: '1号楼电表箱', location: 'A区电气室', type: '接地故障', level: 'high', status: '未处理' },
                        { time: '2025-02-28 12:15:42', device: '门禁系统', location: '数据中心', type: '非法访问', level: 'medium', status: '已处理' }
                    ],
                    stats: {
                        machineRooms: 12,
                        zones: 8,
                        onlineDevices: 310,
                        onlineGateways: 28
                    }
                }
            },
            methods: {
                // 更新时间
                updateTime() {
                    this.currentTime = new Date().toLocaleString();
                },
                
                // 初始化图表
                initChart() {
                    console.log('开始初始化图表');
                    // 延迟初始化图表，确保DOM已完全渲染
                    setTimeout(() => {
                        this.chartData.forEach((chart, index) => {
                            const chartDom = document.getElementById('chart-' + index);
                            if (!chartDom) {
                                console.error('找不到图表容器:', 'chart-' + index);
                                return;
                            }
                            
                            console.log('初始化图表:', index, chart.title);
                            const chartInstance = echarts.init(chartDom);
                            const option = this.getChartOption(chart);
                            chartInstance.setOption(option);
                            
                            // 添加自适应大小
                            window.addEventListener('resize', () => {
                                chartInstance.resize();
                            });
                            
                            this.charts.push(chartInstance);
                        });
                    }, 500);
                },
                
                // 获取图表配置
                getChartOption(chart) {
                    // 检查chart对象是否有效
                    if (!chart) {
                        console.error('图表数据无效');
                        return {};
                    }
                    
                    // 饼图配置
                    if (chart.type === 'pie') {
                        return {
                            title: {
                                text: chart.title,
                                left: 'center',
                                top: 10,
                                textStyle: {
                                    fontSize: 18,
                                    color: '#e4f1fe'
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: chart.data.map(item => item.name),
                                textStyle: {
                                    color: '#e4f1fe',
                                    fontSize: 14
                                },
                                itemGap: 12
                            },
                            series: [{
                                name: chart.title,
                                type: 'pie',
                                radius: '70%',
                                center: ['50%', '55%'],
                                data: chart.data,
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            const colorList = ['#38bdf8', '#818cf8', '#f472b6', '#fb7185'];
                                            return colorList[params.dataIndex % colorList.length];
                                        }
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    color: '#e4f1fe',
                                    fontSize: 14,
                                    formatter: '{b}: {d}%'
                                }
                            }]
                        };
                    }
                    
                    // 折线图和柱状图配置
                    else if (chart.type === 'line' || chart.type === 'bar') {
                        // 检查必要的数据是否存在
                        if (!chart.xData || !chart.series) {
                            console.error('图表缺少必要的数据');
                            return {};
                        }
                        
                        return {
                            title: {
                                text: chart.title,
                                left: 'center',
                                top: 10,
                                textStyle: {
                                    fontSize: 18,
                                    color: '#e4f1fe'
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: chart.series.map(series => series.name),
                                bottom: 10,
                                textStyle: {
                                    color: '#e4f1fe',
                                    fontSize: 14
                                },
                                itemGap: 20
                            },
                            grid: {
                                left: '5%',
                                right: '5%',
                                bottom: '15%',
                                top: '20%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: chart.type === 'bar',
                                data: chart.xData,
                                axisLine: {
                                    lineStyle: {
                                        color: '#e4f1fe'
                                    }
                                },
                                axisLabel: {
                                    color: '#e4f1fe',
                                    fontSize: 12,
                                    margin: 10
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLine: {
                                    lineStyle: {
                                        color: '#e4f1fe'
                                    }
                                },
                                axisLabel: {
                                    color: '#e4f1fe',
                                    fontSize: 12
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                }
                            },
                            series: chart.series.map(series => ({
                                name: series.name,
                                type: chart.type,
                                data: series.data,
                                smooth: chart.smooth || false,
                                areaStyle: chart.areaStyle ? {
                                    opacity: 0.3
                                } : null,
                                itemStyle: {
                                    color: series.color || '#38bdf8'
                                },
                                lineStyle: {
                                    width: 3
                                },
                                symbolSize: 8
                            }))
                        };
                    }
                    
                    // 默认返回空配置
                    console.error('不支持的图表类型:', chart.type);
                    return {};
                },
                
                // 初始化告警滚动
                initAlarmScroll() {
                    console.log('开始初始化告警滚动');
                    
                    // 强制创建一个新的告警列表，确保内容足够长以触发滚动
                    const baseAlarms = this.alarmList.slice();
                    // 复制多份告警数据，确保内容足够长
                    for (let i = 0; i < 3; i++) {
                        baseAlarms.forEach(alarm => {
                            const newAlarm = { ...alarm };
                            // 修改一些属性以区分
                            newAlarm.time = '2025-02-28 ' + (11 - i) + ':' + Math.floor(Math.random() * 60).toString().padStart(2, '0') + ':' + Math.floor(Math.random() * 60).toString().padStart(2, '0');
                            this.alarmList.push(newAlarm);
                        });
                    }
                    
                    console.log('告警数据准备完成，总条数:', this.alarmList.length);
                    
                    // 延迟初始化滚动，确保DOM已完全渲染
                    setTimeout(() => {
                        const alarmList = document.querySelector('.alarm-list');
                        const alarmScroll = document.querySelector('.alarm-scroll');
                        
                        if (!alarmList || !alarmScroll) {
                            console.error('找不到告警列表元素');
                            return;
                        }
                        
                        const alarmListHeight = alarmList.offsetHeight;
                        const alarmScrollHeight = alarmScroll.offsetHeight;
                        
                        console.log('告警列表容器高度:', alarmListHeight);
                        console.log('告警内容实际高度:', alarmScrollHeight);
                        
                        // 如果内容高度不足以滚动，则不启动滚动
                        if (alarmScrollHeight <= alarmListHeight) {
                            console.log('内容高度不足，不需要滚动');
                            return;
                        }
                        
                        // 清除之前的滚动定时器
                        if (this.scrollInterval) {
                            clearInterval(this.scrollInterval);
                        }
                        
                        // 使用简单的自动滚动方法
                        let scrollPosition = 0;
                        const scrollSpeed = 1; // 每次滚动的像素
                        const scrollInterval = 50; // 滚动间隔(ms)
                        const maxScroll = alarmScrollHeight - alarmListHeight;
                        
                        console.log('最大滚动距离:', maxScroll);
                        
                        this.scrollInterval = setInterval(() => {
                            scrollPosition += scrollSpeed;
                            
                            // 当滚动到底部时，重置到顶部
                            if (scrollPosition >= maxScroll) {
                                console.log('重置滚动位置');
                                scrollPosition = 0;
                                // 暂停一下
                                clearInterval(this.scrollInterval);
                                setTimeout(() => {
                                    // 重新开始滚动
                                    this.scrollInterval = setInterval(() => {
                                        scrollPosition += scrollSpeed;
                                        if (scrollPosition >= maxScroll) {
                                            scrollPosition = 0;
                                        }
                                        alarmScroll.style.transform = `translateY(-${scrollPosition}px)`;
                                    }, scrollInterval);
                                }, 2000);
                            }
                            
                            // 直接使用CSS transform进行滚动，性能更好
                            alarmScroll.style.transform = `translateY(-${scrollPosition}px)`;
                        }, scrollInterval);
                    }, 1000); // 延迟1秒初始化滚动
                },
                
                // 获取告警等级文本
                getLevelText(level) {
                    const levelMap = {
                        'high': '高级告警',
                        'medium': '中级告警',
                        'low': '低级告警'
                    };
                    return levelMap[level] || level;
                },
                
                // 处理窗口大小变化
                handleResize() {
                    if (this.charts) {
                        this.charts.forEach(chart => chart.resize());
                    }
                }
            },
            mounted() {
                // 初始化图表
                this.initChart();
                
                // 初始化告警滚动
                this.initAlarmScroll();
                
                // 更新时间
                this.timeInterval = setInterval(() => {
                    this.currentTime = new Date().toLocaleString();
                }, 1000);
            },
            
            beforeDestroy() {
                // 清除定时器
                if (this.timeInterval) {
                    clearInterval(this.timeInterval);
                }
                
                if (this.scrollInterval) {
                    clearInterval(this.scrollInterval);
                }
                
                // 销毁图表实例
                this.charts.forEach(chart => {
                    chart.dispose();
                });
                
                // 移除窗口大小变化监听
                window.removeEventListener('resize', this.handleResize);
            }
        });
    </script>
</body>
</html> 